<template>
    <div style="background: white;width: 100%;height: 100%">
        <el-card>
            <div>
                <span>愿望管理中心</span>
                <el-divider></el-divider>
                <el-input v-model="name" placeholder="请输入许愿者姓名">
                    <el-button slot="append" icon="el-icon-search" @click="getdata(name)"/>
                </el-input>
                <el-table
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column
                            fixed
                            prop="createdAt"
                            label="许愿日期">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="许愿人姓名">
                    </el-table-column>
                    <el-table-column
                            prop="content"
                            label="许愿内容">
                    </el-table-column>
                    <el-table-column v-if="$store.state.userInfos.userInfos.role=='1'"
                                     fixed="right"
                                     label="操作">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
                            <el-button @click="deleteinfo(scope.row)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="limit"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="count">
                </el-pagination>
            </div>
        </el-card>
        <el-dialog title="修改愿望" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="许愿人" prop="name">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="许愿内容" prop="content">
                    <el-input v-model="form.content" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('form')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {Session} from '@/utils/storage';
    import { resetRouter } from '@/router/index.js';
    export default {
        name: 'wish',
        data() {
            let checkname = (rule, value, callback) => {
                let name = /^.{2,12}$/
                if (value === '') {
                    callback(new Error('请输入许愿人姓名'));
                } else {
                    if (!name.test(value)) {
                        callback(new Error('姓名限制在2-12字符'));
                    }
                    callback();
                }
            };
            let checkcontent = (rule, value, callback) => {
                let content = /^.{1,36}$/
                if (value === '') {
                    callback(new Error('请输入愿望'));
                } else {
                    if (!content.test(value)) {
                        callback(new Error('愿望字数限制在1-36字符'));
                    }
                    callback();
                }
            };
            return {
                currentPage: 1,
                limit: 10,
                tableData: [],
                count: 0,
                name: '',
                selectname: '',
                form: {
                    id: '',
                    name: '',
                    content: ''
                },
                dialogFormVisible: false,
                rules: {
                    name: [
                        {validator: checkname, trigger: 'blur'}
                    ],
                    content: [
                        {validator: checkcontent, trigger: 'blur'}
                    ],
                }
            }
        },
        methods: {
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`);
                this.limit = val
                this.getdata(this.selectname)
            },
            handleCurrentChange(val) {
                this.currentPage = val
                this.getdata(this.selectname)
            },
            getdata(name) {
                this.selectname = name
                let data = {
                    page: this.currentPage,
                    rows: this.limit
                }
                if (name != '') {
                    data.name = name
                }
                this.$api.get('wish', data).then((res) => {
                    if (res.code == '401') {
                        this.$message({message: res.msg, type: 'info'});
                        Session.clear(); // 清除缓存/token等
                        this.$store.dispatch('routesList/setRoutesList', []); // 清空 vuex 路由列表缓存
                        resetRouter(); // 删除/重置路由
                        this.$router.push('/login');

                    } else if (res.code == '10000') {
                        this.count = res.data.count
                        this.tableData = res.data.list
                    }else {
                        this.$message({message: res.msg, type: 'info'});
                    }

                })
            },
            handleClick(row) {
                this.form.name = row.name
                this.form.content = row.content
                this.form.id = row.id
                this.dialogFormVisible = true
            },
            submitForm(formName) {

                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (Session.get('userInfo').userName != 'admin') {
                            this.$message({type: 'error', message: '您不只是默认管理员无法操作啦'});
                        } else {
                            let data = {
                                id: this.form.id,
                                name: this.form.name,
                                content: this.form.content
                            }
                            this.$api.put('wish', data).then((res) => {
                                if (res.code == '10000') {
                                    this.$message({message: '修改成功', type: 'success'});
                                    this.getdata(this.selectname)
                                    this.dialogFormVisible = false
                                } else if (res.code == '401') {
                                    this.$message({message: res.msg, type: 'info'});
                                    Session.clear(); // 清除缓存/token等
                                    this.$store.dispatch('routesList/setRoutesList', []); // 清空 vuex 路由列表缓存
                                    resetRouter(); // 删除/重置路由
                                    this.$router.push('/login');
                                } else {
                                    this.$message({message: res.msg, type: 'error'});
                                }
                            })
                        }
                    } else {
                        return false;
                    }
                });
            },
            deleteinfo(row) {
                this.$confirm('是否删除' + `${row.name}` + '的许愿信息', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    if (Session.get('userInfo').userName != 'admin') {
                        this.$message({type: 'error', message: '您不只是默认管理员无法操作啦'});
                    } else {
                        let data = {
                            id: row.id
                        }
                        this.$api.delete('wish', data).then((res) => {
                            if (res.code == '10000') {
                                this.$message({type: 'success', message: '删除成功!'});
                                this.getdata(this.selectname)
                            } else if (res.code == '401') {
                                this.$message({message: res.data, type: 'info'});
                            } else {
                                this.$message({type: 'info', message: res.msg});
                                this.getdata(this.selectname)
                            }
                        })
                    }
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        },
        created() {
            this.getdata(this.name)
        }
    };
</script>

<style scoped lang="scss">

</style>

